@import './variables.less';
@import '../../style/mixins.less';

.fnx-switch {
	position: relative;
	display: inline-block;
	box-sizing: content-box;
	min-width: var(--fnx-switch-min-width);
	height: var(--fnx-switch-height);
	font-size: var(--fnx-switch-size);
	background-color: var(--fnx-switch-background-color);
	border: var(--fnx-switch-border);
	border-radius: var(--fnx-switch-handle-size);
	cursor: pointer;
	transition: background-color var(--fnx-switch-transition-duration);
	user-select: none;
	color: var(--fnx-switch-color);

	&__handle {
		position: absolute;
		top: 0;
		left: 0;
		width: var(--fnx-switch-handle-size);
		height: var(--fnx-switch-handle-size);
		background-color: var(--fnx-switch-handle-background-color);
		border-radius: 100%;
		box-shadow: var(--fnx-switch-handle-box-shadow);
		transition: left var(--fnx-switch-transition-duration)
			cubic-bezier(0.3, 1.05, 0.4, 1.05);
	}

	&__loading {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		font-size: var(--fnx-switch-loading-size);
		color: var(--fnx-switch-loading-color);
	}

	&__inner {
		margin: var(--fnx-switch-inner-margin);
		margin-left: 1.2em;
		margin-right: 0.4em;
		height: var(--fnx-switch-handle-size);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	&__children {
		font-size: var(--fnx-switch-inner-font-size);
	}

	&--on {
		background-color: var(--fnx-switch-on-background-color);
		color: var(--fnx-switch-on-color);

		.fnx-switch__handle {
			left: calc(100% - var(--fnx-switch-handle-size));
		}

		.fnx-switch__loading {
			color: var(--fnx-switch-on-background-color);
		}

		.fnx-switch__inner {
			margin: var(--fnx-switch-on-inner-margin);
		}
	}

	&--disabled {
		cursor: not-allowed;
		opacity: var(--fnx-switch-disabled-opacity);
	}

	&--loading {
		cursor: default;
	}
}
